<template>
	<el-dialog title="导出确认表" :visible.sync="confirmVisible" width="80%" :show-close='false' class="confirmDialog" :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
		  	导出确认表
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
    <el-row>
    	请选择：
      <el-date-picker  v-model="queryData.year" type="year" placeholder="选择年" format='yyyy'  value-format='yyyy' size='mini' @change='exportConfirm'>
      </el-date-picker>
    	<el-select v-model="queryData.maintainType" placeholder="请选择" size="mini" @change='exportConfirm'>
    		<el-option v-for="i in modeArr" :key="i.value" :label="i.name" :value="i.value">
    		</el-option>
    	</el-select>
    	确认表
    </el-row>
		<el-table :data="confirmData"  size="mini" v-if='queryData.maintainType == "MA02" && reload' style="width: 100%;margin-top:10px;height:calc(100% - 40px)" class="tableCon">
			<el-table-column label="序号" min-width="50px" fixed>
				<template slot-scope="scope">
					{{scope.$index+1}}
				</template>
			</el-table-column>
			<el-table-column fixed prop="equipmentName" show-overflow-tooltip label="仪器名称" width="150">
			</el-table-column>
      <!-- 核查：仪器名称、核查日期、核查人、核查意见、审批结果、审批意见
       保养：仪器名称、保养日期、保养人、保养项目（remark）-->
			<el-table-column prop="executeDate" show-overflow-tooltip label="校准日期 " width="120">
				 <template slot-scope="scope">
						{{scope.row.executeDate.substr(0,10)}}
				 </template>
			</el-table-column>
			<el-table-column prop="expiryDate" show-overflow-tooltip label="有效期 " width="120">
				<template slot-scope="scope">
						{{scope.row.expiryDate.substr(0,10)}}
				 </template>
			</el-table-column>
			<el-table-column prop="confirmManName" label="确认人" width="120" >
			</el-table-column>
			<el-table-column prop="checkUnitName" label="检定校准单位" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
        		{{scope.row.checkUnitName?scope.row.checkUnitName:'---'}}
         </template>
			</el-table-column>
			<el-table-column prop="remark" label="检定校准意见" show-overflow-tooltip min-width="120">
			</el-table-column>
			<el-table-column prop="isAgreeName" label="审批结果" width="120" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="opinion" label="审批意见" nin-width="120" show-overflow-tooltip>
			</el-table-column>
		</el-table>
    <el-table :data="confirmData"  size="mini" v-if='queryData.maintainType == "MA03" && reload' style="width: 100%;margin-top:10px;height:calc(100% - 40px)" class="tableCon">
    	<el-table-column label="序号" min-width="50px" fixed>
    		<template slot-scope="scope">
    			{{scope.$index+1}}
    		</template>
    	</el-table-column>
    	<el-table-column fixed prop="equipmentName" show-overflow-tooltip label="仪器名称" width="150">
    	</el-table-column>
      <!-- 核查：仪器名称、核查日期、核查人、核查意见、审批结果、审批意见
       保养：仪器名称、保养日期、保养人、保养项目（remark）-->
    	<el-table-column prop="executeDate" show-overflow-tooltip label="核查日期 " width="120">
    		 <template slot-scope="scope">
    				{{scope.row.executeDate.substr(0,10)}}
    		 </template>
    	</el-table-column>

    	<el-table-column prop="confirmManName" label="核查人" width="120" >
    	</el-table-column>
    	<el-table-column prop="remark" label="核查意见" show-overflow-tooltip min-width="120">
    	</el-table-column>
    	<el-table-column prop="isAgreeName" label="审批结果" width="120" show-overflow-tooltip>
    	</el-table-column>
    	<el-table-column prop="opinion" label="审批意见" nin-width="120" show-overflow-tooltip>
    	</el-table-column>
    </el-table>
    <el-table :data="confirmData"  size="mini" v-if='queryData.maintainType == "MA01" && reload' style="width: 100%;margin-top:10px;height:calc(100% - 40px)" class="tableCon">
    	<el-table-column label="序号" min-width="50px" fixed>
    		<template slot-scope="scope">
    			{{scope.$index+1}}
    		</template>
    	</el-table-column>
    	<el-table-column fixed prop="equipmentName" show-overflow-tooltip label="仪器名称" width="150">
    	</el-table-column>
      <!-- 核查：仪器名称、核查日期、核查人、核查意见、审批结果、审批意见
       保养：仪器名称、保养日期、保养人、保养项目（remark）-->
    	<el-table-column prop="executeDate" show-overflow-tooltip label="保养日期 " width="120">
    		 <template slot-scope="scope">
    				{{scope.row.executeDate.substr(0,10)}}
    		 </template>
    	</el-table-column>

    	<el-table-column prop="confirmManName" label="保养人" width="120" >
    	</el-table-column>
    	<el-table-column prop="remark" label="保养项目" show-overflow-tooltip min-width="120">
    	</el-table-column>
    </el-table>
		<span slot="footer" class="dialog-footer">
	  	 <el-button type="primary" @click="calibrationExport" size="mini">导出</el-button>
	    	<el-button @click="close" size="mini">取 消</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: "confirm-grid",
		props: {
			confirmDialogVisible: Boolean,
			confirmData: Array,
      queryData:Object,
		},
		data() {
			return {
        modeArr: [{
        	name: '仪器保养',
        	value: 'MA01'
        },{
        	name: '检定校准',
        	value: 'MA02'
        },
        {
        	name: '期间核查',
        	value: 'MA03'
        }],
        reload:true,

			}
		},
		created() {

		},
		mounted() {
      this.queryData.year = this.queryData.year + ''
		},
		computed: {
			...mapState(['tableHeightF']),
			confirmVisible: {
				get() {
					return this.confirmDialogVisible
				},
				set() {

				}
			}
		},
		methods: {
      exportConfirm() {
        this.reload = false;
        this.$nextTick(()=>{
          this.reload = true;
        })
      	this.$parent.exportConfirm()
      },
			calibrationExport() {

        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        let url = 'resource/calibrationExport.htm?maintainType=' + this.queryData.maintainType + '&year=' + this.queryData.year + "&token=" + token

        window.open(process.env.baseUrl + url);
				this.close()

			},
			close() {
				this.$emit('update:confirmDialogVisible', false)
        this.$parent.queryData = {
          maintainType: 'MA02',
          year: new Date().getFullYear() + ''
        }
			}
		}

	}

</script>

<style>
	.confirmDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.confirmDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}
</style>
